<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们</title>
    <link rel="stylesheet" href="./bootstrap-4.6.2-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./bootstrap-4.6.2-dist/css/bootstrap-icons/bootstrap-icons.css">
    <script src="./bootstrap-4.6.2-dist/js/jquery-3.7.1.min.js"></script>
    <script src="./bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>
</head>

<style>
    body {
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        color: #333;
        line-height: 1.6;
    }

    a {
        text-decoration: none;
        color: #333;
        transition: color 0.3s ease;
    }

    a:hover {
        color: #ffc107;
    }

    /* 导航栏 */
    .navbar {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .navbar-brand {
        font-size: 2rem;
        font-weight: 700;
        color: #ffc107 !important;
    }

    .nav-link {
        margin: 0 0.5rem;
        font-weight: 500;
    }

    /* 登录界面 */
    .login-modal .modal-content {
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .login-modal .modal-header {
        border-bottom: none;
    }

    .login-modal .form-control:focus {
        border-color: #ff6b00;
        box-shadow: 0 0 0 0.25rem rgba(255, 107, 0, 0.25);
    }

    .login-btn {
        background-color: #ff6b00;
        border-color: #ff6b00;
        transition: all 0.3s;
    }

    .login-btn:hover {
        background-color: #e65e00;
        transform: translateY(-2px);
    }

    .forgot-password {
        color: #666;
        font-size: 14px;
        transition: color 0.3s;
    }

    .forgot-password:hover {
        color: #ff6b00;
        text-decoration: underline;
    }

    .my-pills .nav-link.active {
        color: #000;
        font-weight: bolder;
        background-color: white !important;
        border-bottom: 2px solid #000;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-color: #007bff !important;
    }

    /*  hero 区域样式 */
    .hero {
        background: url('./img/jumu.jpeg') no-repeat center center;
        background-size: cover;
        color: #fff;
        padding: 4rem 0;
    }

    .hero h1 {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .hero p {
        font-size: 1rem;
        opacity: 0.9;
    }

    /* 传奇的起源模块 */
    .origin-section {
        padding: 3rem 0;
    }

    .origin-section h2 {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 2rem;
        text-align: center;
    }

    .origin-content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .origin-content img {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        object-fit: cover;
        margin: 1rem;
    }

    .origin-text {
        max-width: 600px;
        text-align: center;
    }

    .origin-text .quote {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .timeline {
        list-style: none;
        padding: 0;
        margin: 1rem 0;
    }

    .timeline li {
        margin: 0.5rem 0;
        font-size: 0.95rem;
    }

    .btn-more-history {
        background-color: #fff;
        border: 1px solid #eee;
        padding: 0.375rem 1rem;
        border-radius: 4px;
        font-size: 0.9rem;
    }

    /* 我们坚守的信念模块 */
    .belief-section {
        padding: 3rem 0;
        background-color: #f8f9fa;
    }

    .belief-section h2 {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 2rem;
        text-align: center;
    }

    .belief-cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
    }

    .belief-card {
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 2rem;
        width: 300px;
        text-align: center;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
    }

    .belief-card h6 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

    .belief-card p {
        font-size: 0.9rem;
        margin-bottom: 0;
    }

    /* 遇见我们的团队模块 */
    .team-section {
        padding: 3rem 0;
    }

    .team-section h2 {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 2rem;
        text-align: center;
    }

    /* 使用媒体对象组件 */
    .team-media {
        display: flex;
        align-items: center;
        margin-bottom: 2rem;
        background-color: #fff;
        padding: 1.5rem;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
    }

    .team-media img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 1.5rem;
    }

    .team-media .media-body h6 {
        font-weight: 600;
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }

    .team-media .media-body p {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    /* 弹出框样式 */
    .btn-popover {
        background-color: #fff;
        border: 1px solid #eee;
        padding: 0.25rem 0.75rem;
        border-radius: 4px;
        font-size: 0.8rem;
    }

    /* 随时联系我们模块 */
    .contact-section {
        padding: 3rem 0;
        background-color: #f8f9fa;
    }

    .contact-section h2 {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 2rem;
        text-align: center;
    }

    .contact-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3rem;
    }

    .contact-info,
    .contact-map,
    .contact-social {
        flex: 1;
        min-width: 250px;
    }

    .contact-info p {
        margin: 0.5rem 0;
        font-size: 0.95rem;
    }

    .contact-map img {
        width: 100%;
        border-radius: 4px;
        margin-top: 1rem;
    }

    .social-icons {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .social-icons img {
        width: 24px;
    }

    .subscribe-form .form-control {
        display: inline-block;
        width: 70%;
        margin-right: 1rem;
        font-size: 0.9rem;
    }

    .subscribe-form .btn {
        font-size: 0.9rem;
    }

    /* 页脚 */
    footer {
        background-color: #0c2b4b;
        color: #fff;
    }

    @media (min-width: 576px) {
        .modal-dialog {
            max-width: 800px;
            margin: 1.75rem auto;
        }
    }
</style>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <a class="navbar-brand" href=" ">HUAN</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"
                aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav ml-auto d-flex justify-content-end">
                    <li class="nav-item"><a class="nav-link" href="./index.html">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="./客房.html">客房</a></li>
                    <li class="nav-item"><a class="nav-link" href="./餐饮.html">餐饮</a></li>
                    <li class="nav-item"><a class="nav-link" href="./关于我们.html">关于我们</a></li>
                    <li class="nav-item"><a class="nav-link" href="tel:4008888888"><svg
                                xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-phone" viewBox="0 0 16 16">
                                <path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 
                                    0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z" />
                                <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
                            </svg>400 888 8888</a></li>
                    <li class="nav-item"><a class="btn btn-warning" href="./立即预定.html">立即预订</a></li>
                    <li class="nav-item mx-2 ms-auto"><a href="#loginModal" class="btn btn-primary"
                            data-toggle="modal">登录</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 登录模态框 -->
    <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" data-dismiss="modal" class="close" aria-lable="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="row mt-5">
                        <div class="col">
                            <p> 扫码</p>
                            <img src="./img/1.gif" height="300px" width="300px" alt="">
                        </div>
                        <div class="col">
                            <!-- Nav tabs -->
                            <ul class="nav nav-pills my-pills" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home"
                                        type="button">账号登陆</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile"
                                        type="button">短信登陆</button>
                                </li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content mt-3">
                                <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                    <form action="">
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control"
                                                placeholder="请输入账号/邮箱">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入密码">
                                        </div>
                                        <div class="form-group text-right">
                                            <a href="">忘记密码?</a>
                                        </div>
                                        <div class="form-group">
                                            <button class="btn btn-primary btn-block" type="submit">登录</button>
                                        </div>
                                        <div class="form-group text-center small">
                                            <input type="checkbox" name="" id=""> 我已阅读并同意<a
                                                href="#">《HUAN用户服务协议和隐私政策》</a>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                    <form action="">
                                        <div class="form-group small text-muted">
                                            验证即登录，未注册将自动创建账号
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入手机号">
                                        </div>
                                        <div class="form-group position-relative">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入验证码">
                                            <a class="position-absolute border-left px-2"
                                                style="right: 5px; top:5px">获取验证码</a>
                                        </div>
                                        <div class="form-group mt-5">
                                            <button class="btn btn-primary btn-block" type="submit">登录</button>
                                        </div>
                                        <div class="form-group text-center small">
                                            <input type="checkbox" name="" id=""> 我已阅读并同意<a
                                                href="#">《HUAN用户服务协议和隐私政策》</a>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer  justify-content-between">
                    <div>
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-qzone.png" alt="">
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-tsina.png" alt="">
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-weixin.png" alt="">
                    </div>
                    <a href="">立即注册</a>
                </div>
            </div>
        </div>
    </div>

    <!-- hero 区域 -->
    <section class="hero">
        <div class="container">
            <h1>我们的故事与传承</h1>
            <p>自 1985 年以来提供卓越服务</p>
        </div>
    </section>
    <!-- 传奇的起源 -->
    <section class="origin-section">
        <div class="container">
            <h2>传奇的起源</h2>
            <div class="origin-content">
                <img src="./img/创始人.jpg!qt_w320" alt="创始人">
                <div class="origin-text">
                    <p class="quote">"真正的奢华不在于金碧辉煌，而在于无微不至的服务 永恒的细节。" —— 创始人 林夕</p>
                    <h6>历史里程碑</h6>
                    <ul class="timeline">
                        <li><strong>1985</strong>：海滨大酒店在厦门创立，最初仅有 50 间客房</li>
                        <li><strong>1998</strong>：扩建为 200 间客房，增设海鲜餐厅和会议中心</li>
                        <li><strong>2010</strong>：荣获“中国最佳商务酒店”称号</li>
                    </ul>
                    <button class="btn btn-more-history">查看更多历史</button>
                </div>
            </div>
        </div>
    </section>

    <!-- 我们坚守的信念 -->
    <section class="belief-section">
        <div class="container">
            <h2>我们坚守的信念</h2>
            <div class="belief-cards">
                <div class="belief-card">
                    <svg class="bi bi-bell text-warning" width="2em" height="2em" viewBox="0 0 16 16"
                        fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2z" />
                        <path fill-rule="evenodd"
                            d="M8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 
                            1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 
                            4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68
                             10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
                    </svg>
                    <h6>卓越服务</h6>
                    <p>我们将为每位客人提供个性化、无微不至的服务体验，让您感受到家的温暖。</p>
                    <a href="#" class="small">了解更多 ></a>
                </div>
                <div class="belief-card">
                    <svg class="bi bi-sun text-warning" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M3.5 8a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0z" />
                        <path fill-rule="evenodd" d="M8.202.28a.25.25 0 0 0-.404 0l-.91 1.255a.25.25 0 0 1-.334.067L5.232.79a.25.25
                             0 0 0-.374.155l-.36 1.508a.25.25 0 0 1-.282.19l-1.532-.245a.25.25 0 0 0-.286.286l.244
                              1.532a.25.25 0 0 1-.189.282l-1.509.36a.25.25 0 0 0-.154.374l.812 1.322a.25.25 0 0 
                              1-.067.333l-1.256.91a.25.25 0 0 0 0 .405l1.256.91a.25.25 0 0 1 .067.334L.79 10.768a.25.25
                               0 0 0 .154.374l1.51.36a.25.25 0 0 1 .188.282l-.244 1.532a.25.25 0 0 0 .286.286l1.532-.244a.25.25 
                               0 0 1 .282.189l.36 1.508a.25.25 0 0 0 .374.155l1.322-.812a.25.25 0 0 1 .333.067l.91 1.256a.25.25 
                               0 0 0 .405 0l.91-1.256a.25.25 0 0 1 .334-.067l1.322.812a.25.25 0 0 0 .374-.155l.36-1.508a.25.25 
                               0 0 1 .282-.19l1.532.245a.25.25 0 0 0 .286-.286l-.244-1.532a.25.25 0 0 1 .189-.282l1.508-.36a.25.25
                                0 0 0 .155-.374l-.812-1.322a.25.25 0 0 1 .067-.333l1.256-.91a.25.25 0 0 0 0-.405l-1.256-.91a.25.25
                                 0 0 1-.067-.334l.812-1.322a.25.25 0 0 0-.155-.374l-1.508-.36a.25.25 0 0 1-.19-.282l.245-1.532a.25.25 
                                 0 0 0-.286-.286l-1.532.244a.25.25 0 0 1-.282-.189l-.36-1.508a.25.25 0 0 0-.374-.155l-1.322.812a.25.25
                                  0 0 1-.333-.067L8.203.28zM8 2.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z" />
                    </svg>
                    <h6>可持续发展</h6>
                    <p>我们每年节水 15000 吨，减少碳排放 30%，致力于打造绿色循环的奢华体验。</p>
                    <a href="#" class="small">了解更多 ></a>
                </div>
                <div class="belief-card">
                    <svg class="bi bi-battery text-warning" width="1em" height="1em" viewBox="0 0 16 16"
                        fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M12 5H2a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1zM2 4a2 2 0 0 0-2 2v4a2
                             2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2z" />
                        <path d="M14.5 9.5a1.5 1.5 0 0 0 0-3v3z" />
                    </svg>
                    <h6>社区关怀</h6>
                    <p>我们与本地社区紧密合作，支持教育项目，员工每年贡献超过 1000 小时志愿服务。</p>
                    <a href="#" class="small">了解更多 ></a>
                </div>
            </div>
        </div>
    </section>
    <!-- 遇见我们的团队 - 使用媒体对象组件 -->
    <section class="team-section">
        <div class="container">
            <h2>遇见我们的团队</h2>
            <div class="team-media">
                <img src="./img/成员1.webp" alt=" ">
                <div class="media-body">
                    <h6>吴雅 总经理</h6>
                    <p>拥有 15 年高端酒店管理经验，曾任职于多家国际五星级酒店，张女士带领团队连续三年获得“最佳服务酒店”称号。</p>
                    <button type="button" class="btn btn-popover" data-toggle="popover" data-placement="top"
                        data-content="张雅雯女士毕业于瑞士洛桑酒店管理学院，曾在迪拜帆船酒店担任高级管理职务。她致力于将东方待客之道与国际服务标准相结合。" title="管理理念">
                        查看详情
                    </button>
                </div>
            </div>
            <div class="team-media">
                <img src="./img/厨师.jpeg" alt=" ">
                <div class="media-body">
                    <h6>张志明 行政总厨</h6>
                    <p>米其林星级厨师，擅长融合本地食材与国际烹饪技法，陈师傅带领的餐饮团队连续五年获得“最佳酒店餐厅”荣誉。</p>
                    <button type="button" class="btn btn-popover" data-toggle="popover" data-placement="top"
                        data-content="陈志明师傅曾在法国、日本和意大利学习烹饪技艺，将传统闽菜与国际美食相结合，创造出独特的味觉体验。每周六晚他会在酒店餐厅亲自掌勺。" title="烹饪风格">
                        查看详情
                    </button>
                </div>
            </div>
            <div class="team-media">
                <img src="./img/成员2.png!qt_w320" alt=" ">
                <div class="media-body">
                    <h6>李浩然 宾客服务总监</h6>
                    <p>精通五国语言，为来自全球的客人提供个性化服务方案，李先生创立的“无忧旅程”服务获得 98% 的客人满意度。</p>
                    <button type="button" class="btn btn-popover" data-toggle="popover" data-placement="top"
                        data-content="李浩然先生拥有20年高端酒店服务经验，精通英语、法语、日语、西班牙语和普通话。他的团队可以满足客人从接机到离店的全方位需求，包括私人导游安排和特殊场合策划。"
                        title="服务特色">
                        查看详情
                    </button>
                </div>
            </div>
        </div>
    </section>
    <!-- 随时联系我们 -->
    <section class="contact-section">
        <div class="container">
            <h2>随时联系我们</h2>
            <div class="contact-content">
                <div class="contact-info">
                    <h6>地址：</h6>
                    <p>中国上海市浦东新区某路某号 1288 号</p>
                    <h6>联系方式：</h6>
                    <p>电话：400 888 8888</p>
                    <p>邮箱：1111111.com</p>
                    <p>工作时间：每天 7:00 - 23:00</p>
                    <h6 class="mt-3">紧急联系</h6>
                    <p>24 小时服务热线：+86 592 8765 4321</p>
                </div>
                <div class="contact-map">
                    <img src="./img/地图.png" alt=" ">
                </div>
                <div class="contact-social">
                    <h6>社交媒体</h6>
                    <div class="social-icons">
                        <a href="#"><img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-qzone.png"
                                alt=""></a>
                        <a href="#"><img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-tsina.png"
                                alt=""></a>
                        <a href="#"><img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-weixin.png"
                                alt=""></a>
                    </div>
                    <form class="subscribe-form">
                        <input type="email" class="form-control" placeholder="您的邮箱地址">
                        <button class="btn btn-warning" type="submit">订阅</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!--页脚-->
    <footer>
        <div class="container">
            <div class="col text-center">
                <!-- 联系我们 -->
                <div class="col-md-12">
                    <h5>联系我们</h5>
                    <div class="contact-info">
                        <p>中国上海市浦东新区某路某号 1288 号</p>
                        <p>电话：400 888 8888</p>
                        <p>邮箱：1111111.com</p>
                    </div>
                </div>
                <!-- 版权与政策 -->
                <div class="col mt-4">
                    <div class="col-12 text-center">
                        <p class="mb-0">&copy; 2023 HUAN酒店集团 版权所有</p>
                        <p class="mb-0">
                            <a href="#" class="mr-3">隐私政策</a>
                            <a href="#" class="mr-3">使用条款</a>
                            <a href="#">Cookie 政策</a>
                        </p>
                    </div>
                </div>
            </div>
    </footer>
    <!-- 初始化弹出框 -->
    <script>
        $(document).ready(function () {
            // 初始化所有弹出框
            $('[data-toggle="popover"]').popover({
                trigger: 'hover', // 鼠标悬停时显示
                html: true,      // 允许弹出框内容包含HTML
                delay: { show: 300, hide: 300 } // 延迟显示和隐藏，避免误触
            });
        });
    </script>

</body>

</html>